<template>
  <div class="GdwyyAppSecondpageIndex">
    <GdwyyAppZl
      :showJf="showZlJf"
      :pageType="pageType"
      :pageTitle="pageTitle"
      :isBq="type == 'bq'"
      :type="type"
      :data="zlDataConfig.data"
      :dataModel="zlDataConfig.dataModel"
      :queryParam="queryParam"
      :loading="zlLoading"
      @openDialog="handleopenDialog($event, 'zl')"
    ></GdwyyAppZl>

    <GdwyyAppSqmx v-if="type === 'sqx'" :data="sqx" :loading="sqxLoading"></GdwyyAppSqmx>
    <GdwyyAppYytmx
      v-if="type === 'yyx'"
      :dataModel="yytmxDataModel"
      :data="yytmx"
      :loading="yytLoading"
      @openDialog="handleopenDialog($event, 'yyt')"
      @changeYyt="yytmxHooks"
    ></GdwyyAppYytmx>

    <!-- 智家线 展示二级页面人员明细发展+交付板块 -->
    <GdwyyAppRymx
      v-if="type === 'zjx'"
      :data="finalDataList"
      :dataModel="rymxModel"
      :loading="rymxLoading"
      @openDialog="handleopenDialog($event, 'rymx')"
    ></GdwyyAppRymx>
    <!-- 营业线/社渠线 只展示二级页面人员明细发展板块 -->
    <GdwyyAppRymxNoJf
      v-else-if="type != 'bq'"
      :data="rymx"
      :dataModel="rymxModel"
      :loading="rymxLoading"
      @openDialog="handleopenDialog($event, 'rymx')"
    ></GdwyyAppRymxNoJf>

    <GdwyyAppMbsc
      v-if="type === 'bq'"
      :loading="mbscLoading"
      :data="mbsc"
      :queryParam="queryParam"
      @openDialog="handleopenDialog($event, 'mbsc')"
    ></GdwyyAppMbsc>
  </div>
</template>

<script>
import { GdwyyAppZl, GdwyyAppYytmx, GdwyyAppRymx, GdwyyAppRymxNoJf, GdwyyAppSqmx, GdwyyAppMbsc } from './panels/index'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import * as dataConfig from '../common.js'
import { showZwtNav } from '@/utils/showNav.js'
import { postAction, sql2apiAction } from '@api/manage'

export default {
  name: 'GdwyyAppSecondpageIndex',
  components: {
    GdwyyAppZl,
    GdwyyAppYytmx,
    GdwyyAppRymx,
    GdwyyAppRymxNoJf,
    GdwyyAppSqmx,
    GdwyyAppMbsc,
  },
  mixins: [reconsitutionMixin],
  data() {
    return {
      pageTitle: '',
      type: '',
      pageType: '',
      queryParam: {},

      zlData: {},
      yytmx: [],
      rymx: [],
      jfRymxList: [],
      sqx: [],
      yytmxDataModel: dataConfig._yytmxDataModel,
      rymxModel: dataConfig._rymxDataModel,
      rymxLoading: true,
      zlLoading: true,
      yytLoading: true,
      sqxLoading: false,
      mbscLoading: false,
      mbsc: [],

      dialogParams: {},
      dialogUrlConfig: '',

      url: {
        jfRymxCh: '2c3a07178ba92724018bba909ce60007',
        jfRymxXh: '2c3a07178ba92724018bcbbc04690011',
      },
    }
  },

  computed: {
    showZlJf() {
      return this.type === 'zjx' || this.type === 'bq'
    },
    currentPageApiConfig() {
      return dataConfig.detailPageApiConfig[this.pageType][this.type]
    },
    zlDataConfig() {
      const { dataModel, data } = dataConfig[this.type + 'DataConfig']
      return { dataModel, data: { ...data, ...this.zlData } }
    },
    finalDataList() {
      const jfField = [
        'ZJ_PDL',
        'ZJ_ZTL',
        'ZJ_JGL',
        'ZJ_TDL',
        'YJ_PDL',
        'YJ_ZTL',
        'YJ_JGL',
        'YJ_TDL',
        'XJ_PDL',
        'XJ_ZTL',
        'XJ_JGL',
      ]
      // if ( this.pageType == 'morning' ) {
      for (const user of this.rymx) {
        user.key = user.key ? user.key + '1' : user.staff_id
        jfField.forEach((field) => (user[field] = 0))
        for (const jfUser of this.jfRymxList) {
          if (user.staff_id == jfUser.JDR_DEVELOP_ID_OA) {
            jfField.forEach((field) => {
              user[field] = jfUser[field] || 0
            })
          }
        }
      }
      // }
      return this.rymx
    },
  },

  created() {
    const { pageTitle, type, pageType, queryParam } = this.$route.query
    this.$route.meta.title = this.pageTitle = pageTitle
    document.title = pageTitle
    showZwtNav(pageTitle)
    this.type = type
    this.pageType = pageType
    this.queryParam = JSON.parse(queryParam)
    this.setAllRequest(this.currentPageApiConfig, this.queryParam)
    this.loadJfRymxData()
  },

  methods: {
    mbscHook(data) {
      const { pageTitle } = this
      // const list = data.length ? data.filter((data) => data.BQ_NAME == pageTitle) : []
      this.mbsc = data
    },
    async yytmxHooks(list) {
      const obj = {
        morning: '8a31cdd68a7e768a018aca3ce2f80021',
        evening: '8a31cdd68a7e768a018acc5883ea0030',
      }
      // 根据营业厅获取人员明细
      const url = '/Sql2ApiCall/call/' + obj[this.pageType]
      this.rymxLoading = true
      this.rymx = []
      const res = await postAction(url, { ...this.queryParam, chnlId: list.length ? list[0].chnl_id : '' })
      const jsonRes = JSON.parse(res.result)
      const { data, state } = jsonRes
      if (state == 200) {
        this.rymx = data
        this.rymxLoading = false
      }
    },

    handleopenDialog({ num = 0, params, panelType }, id) {
      if (!Number(num)) return
      const target = `${this.type}${panelType ? '_' + panelType : ''}_${id}`
      const currentUrlConfig = dataConfig.yrmxDialogUrlConfig[this.pageType]
      this.dialogUrlConfig = currentUrlConfig[target]
      // this.dialogParams = { ...params, ...this.queryParam, chnIType: Number(this.queryParam.chnIType) }
      this.dialogParams = { ...params, ...this.queryParam, marketType: this.queryParam.chnIType }
      this.$open('/publicline/morningEvening/indicatorDetails', {
        url: this.dialogUrlConfig,
        queryParams: JSON.stringify(this.dialogParams),
      })
    },

    loadJfRymxData() {
      const params = {
        ...this.queryParam,
      }
      let url = ''
      if (this.pageType == 'morning') url = this.url.jfRymxCh
      if (this.pageType == 'evening') url = this.url.jfRymxXh
      sql2apiAction(url, params).then((res) => {
        this.jfRymxList = res.result || []
        this.$forceUpdate()
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppSecondpageIndex {
}
</style>